import { createContext, useContext, useState } from 'react';
import type { ReactNode } from 'react';

// 定义主题模式类型
export type ThemeMode = 'light' | 'dark';

// 创建 Context
export const ThemeModeContext = createContext<{
  mode: ThemeMode;
  setMode: (mode: ThemeMode) => void;
  toggleMode: () => void;
}>({
  mode: 'light',
  setMode: () => {},
  toggleMode: () => {},
});

// 提供 Provider 组件
export const ThemeModeProvider = ({ children }: { children: ReactNode }) => {
  const [mode, setMode] = useState<ThemeMode>('light');
  const toggleMode = () => setMode(mode === 'light' ? 'dark' : 'light');
  return (
    <ThemeModeContext.Provider value={{ mode, setMode, toggleMode }}>
      {children}
    </ThemeModeContext.Provider>
  );
};

// 自定义 Hook，方便使用
export const useThemeMode = () => useContext(ThemeModeContext);
